<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>车辆分布</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand" />  
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/tracking.css"/>
		<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1400px)"  href="css/tracking1.css"/>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1e0u2fDgqYhUdilCb10Lz7xHyTBf99hG"></script>
		<style>
			body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
			#r-result{
				position: absolute;
				top: 120px;
				right: 5px;
				z-index: 9999;
				background: #fff;
				width: 320px;
				height: 420px;
				filter:alpha(opacity=70); /*IE滤镜，透明度50%*/
				-moz-opacity:0.7; /*Firefox私有，透明度50%*/
				opacity:0.7;/*其他，透明度50%*/
			}
			dl{
				margin: 5px;
			}
			dt{
				float: left;
				width: 100%;
				padding-left: 10px;
				padding-top: 10px;
			}
			em{
				display: block;
				width: 20px;
				background: red;
				border-radius: 10px;
				color: #fff;
				text-align: center;
				font-style: normal;
				float: left;
			}
			span{
				float: left;
				padding-left: 20px;
				color: #0F6AFC;
			}
			.bottom{
				float: right;
				padding-right: 10px;
				height: 25px;
				border: 0px;
				border-radius: 3px;
				padding-left: 5px;
				cursor:pointer;
				background: #0F6AFC;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<section class="layui-larry-box">
			<div class="larry-personal">
				<div class="layui-tab">
					<blockquote class="layui-elem-quote mylog-info-tit" style="background: #fff;">
						<ul class="handle-box">
							<li class="handle-item">
								<span class="layui-form-label"  style="float: left;line-height: 30px;">输入设备名：</span>
								<div class="layui-input-inline"style="float: left;">
									<input type="text" id="distribution_name" v-model="deviceNo" autocomplete="off" placeholder="请输入用户名" class="layui-input">
								</div>
								<div class="layui-btn mgl-20" id="distributiona" >查询</div>
							</li>
						</ul>
					</blockquote>
				</div>
			</div>
		</section>
		<div id="container"></div> 
		<div id="r-result"></div>
		<script src="layui/layui.js"></script>
		<script src="js/common.js"></script>
		<script type="text/javascript" src="js/echarts.min.js" ></script>
		<script src="js/china.js" charset ="utf-8"></script>  
		<script src="js/tracking_equipment.js"></script>
		<script>
			layui.use(['layer'], function() {
				var $ = layui.jquery;
				var map = new BMap.Map("container");
				
				
				$(function(){
					$.ajax({
						url : url + '/ic-iot/user/'+adminId+'/devices/locations',
						type : 'GET',
						dataType : 'json',
						beforeSend: function(request) {
				            request.setRequestHeader("accessToken", accessToken);
				        },
						success : function(data) {
							console.log(data);
							// 百度地图API功能
							var div = document.getElementById("r-result");
					        var table = "";
							for(i=0; i<data.result.length; i++){
								var latitude = data.result[i].latitudeBaidu;
								var longitude = data.result[i].longitudeBaidu;
								var positions = data.result[i].position;
								var deviceId = data.result[i].deviceId;
								var point = new BMap.Point(longitude,latitude);
								var name = data.result[i].deviceName;
								var markerArr = [  
				                    { title: name, point:point,},  
				                    { title: name, point:point,},  
				                    { title: name, point:point,},  
				                    { title: name, point:point,},  
				                    { title: name, point:point,},  
				                    { title: name, point:point,},  
				                    { title: name, point:point,},  
				                    { title: name, point:point,},  
				                    { title: name, point:point,},  
				                    { title: name, point:point,},  
				                ];  
				               var b = i+1;
					            table += "<dl>";
					            table += '<dt><em>'+b+'</em><span>'+name+'</span><button class="bottom" id="trajectory'+i+'">轨迹回放</button></dt>';
					            table += '<dt>'+positions+'</dt>';
					            table += '<dt><input type="hidden" class="name'+i+'" id='+deviceId+'></dt>';
					            table += "</dl>";
					            
								map.centerAndZoom(point, 7);
								map.enableScrollWheelZoom(true);
								var myIcon = new BMap.Icon("img/che.png", new BMap.Size(20,20));
								var marker = new BMap.Marker(point,{icon:myIcon});  // 创建标注
								map.addOverlay(marker);            // 将标注添加到地图中
								var label = new BMap.Label(markerArr[i].title,{offset:new BMap.Size(20,-10)});
								marker.setLabel(label);
								
							
							}
							div.innerHTML = table;
							for(var i=0; i<data.result.length; i++){
								var ss = '#trajectory'+i;
								(function(i){
									$(ss).on('click', function() {
								 var username = '轨迹回放';
								 var tag=$('.name'+i)
								 var href = 'trajectory.html?deviceId='+ tag.attr("id");
								 var index = layer.open({
									 type:2,
									 title:username,
									 fixed:false,
									 maxmin:false,
									 area:['100%','100%'],
									 content:href,
								 });
								 layer.full(index);
								 });
								})(i);
							}
						}
					});
				});
				//查询
				$("#distributiona").on('click',function(){
					var name = $("#distribution_name").val();
					$.ajax({
						url : url + '/ic-iot/user/'+adminId+'/devices/locations',
						type : 'GET',
						data:{
							"deviceName" : name,
						},
						dataType : 'json',
						beforeSend: function(request) {
				            request.setRequestHeader("accessToken", accessToken);
				        },
						success : function(data) {
							if(data.numReturn == 0){
								layer.msg("暂无信息");
							}else{
								var userId = data.result[0].userId;
								var latitude = data.result[0].latitudeBaidu;
								var longitude = data.result[0].longitudeBaidu;
								var point = new BMap.Point(longitude,latitude);
								map.centerAndZoom(point, 10);
								map.enableScrollWheelZoom(true);
								var myIcon = new BMap.Icon("img/che.png", new BMap.Size(20,20));
								var marker = new BMap.Marker(point,{icon:myIcon});  
								map.addOverlay(marker);              
								/*marker.addEventListener("click",function(e){
									openInfo(e,userId);	
								});*/
							}
							
						}
					});
				});
				/*function openInfo(e,userId){
					console.log(userId);
					var html = '<footer id="footer"><div class="abnormal"><dl class="tow"><img src="img/red.png" /><dt>超限</br>2%</dt><dd>overrun</dd> </dl><dl class="three"><img src="img/yellow.png" /><dt>异常</br>3%</dt><dd>abnormal</dd></dl><dl class="four"><img src="img/green.png" /><dt>正常</br>92%</dt><dd>normal</dd></dl><dl class="five"><img src="img/gray.png" /><dt>离线</br>3%</dt><dd>offLine</dd></dl></div><div class="tracking_equipment"><img style="width: 100%;" src="img/su.png"></div><div class="tracking_abnormal"><ul><li><span class="name">温湿度测试点06</span><span class="temperature">23℃   25% | 24℃   25%</span><span class="time">2010-06-08 14:09</span></li><li><span class="name">温湿度测试点04</span><span class="temperature">26℃   25% | 26℃   25%</span><span class="time">2010-06-08 12:16</span></li><li><span class="name">温湿度测试点01</span><span class="temperature">24℃   25% | 24℃   25%</span><span class="time">2010-06-08 08:25</span></li><li><span class="name">温湿度测试点02</span><span class="temperature">25℃   25% | 25℃   25%</span><span class="time">2010-06-08 11:45</span></li><li><span class="name">温湿度测试点03</span><span class="temperature">23℃   25% | 22℃   25%</span><span class="time">2010-06-08 10:20</span></li></ul></div><div class="car_information"><img id="offs" src="img/on.png" style="width:8%;float:right;" ><dl><dt><img src="img/t1.jpg"/></dt></dl><ul><li><span>308国道社区卫生服务站</span></li><li>设备：<span>8</span></li></ul></div><div style="float: right; padding-right: 1%;"><button id="trajectory">轨迹回放</button></div></footer>';
					$("#r-result").html(html);
					$("#offs").click(function(){
						$("#footer").hide();
					});
						 
					 $('#trajectory').on('click', function() {
						var username = '轨迹回放';
				    	var href = 'trajectory.html?userId='+userId;
				    	var index = layer.open({
					    	type:2,
					    	title:username,
					    	fixed:false,
					    	maxmin:false,
					    	area:['100%','100%'],
					    	content:href,
				    	});	
				    	layer.full(index);
					});
					var p = e.target;
				}*/
				 
			});
		</script>

	</body>

</html>